<!-- 显示星星抽离 -->
<template>
  <div :class="'star star-' + size">
    <span class="star-item" 
    v-for="(starClass,index) in startClasses" 
    :key="index"
    :class="starClass"
    ></span>
  </div>
</template>

<script>
const CLASS_ON = 'on'
const CLASS_HALF = 'half'
const CLASS_OFF = 'off'
// 这里确定下这里需要那几个属性
// 1 当前的尺寸大小
// 2 当前的评分
export default {
    props: {
        size: Number,
        rating: Number,
    },
    data() {
        return {}
    },

    components: {},

    computed: {
        startClasses() {
            let classArr = []
            const {rating} = this
            const ratingInt = Math.floor(rating)
            for (let  i = 0 ; i < ratingInt ; i++) {
                classArr.push(CLASS_ON)
            }
            // 计算相差的值
            if( (rating * 10 - ratingInt * 10) > 5) {
                classArr.push(CLASS_HALF)
            }
            // 剩下的星星
            while(classArr.length < 5) {
                classArr.push(CLASS_OFF)
            }
            return classArr
        },
    },

    mounted() {},

    methods: {},
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.star { // 2x图 3x图
  float: left;
  font-size: 0;

  .star-item {
    display: inline-block;
    background-repeat: no-repeat;
  }

  &.star-48 {
    .star-item {
      width: 20px;
      height: 20px;
      margin-right: 22px;
      background-size: 20px 20px;

      &:last-child {
        margin-right: 0;
      }

      &.on {
        bg-image('./images/star48_on');
      }

      &.half {
        bg-image('./images/star48_half');
      }

      &.off {
        bg-image('./images/star48_off');
      }
    }
  }

  &.star-36 {
    .star-item {
      width: 15px;
      height: 15px;
      margin-right: 6px;
      background-size: 15px 15px;

      &:last-child {
        margin-right: 0;
      }

      &.on {
        bg-image('./images/star36_on');
      }

      &.half {
        bg-image('./images/star36_half');
      }

      &.off {
        bg-image('./images/star36_off');
      }
    }
  }

  &.star-24 {
    .star-item {
      width: 10px;
      height: 10px;
      margin-right: 3px;
      background-size: 10px 10px;

      &:last-child {
        margin-right: 0;
      }

      &.on {
        bg-image('./images/star24_on');
      }

      &.half {
        bg-image('./images/star24_half');
      }

      &.off {
        bg-image('./images/star24_off');
      }
    }
  }
}
</style>